<template>
	<view class="content">
		<view class="navs">
			<uni-icons type="shop-filled" size="30" color="white"></uni-icons>
			<text class="text" style="font-size: 18px; color: white;">物联设备管理</text>
		</view>
		<view class="top">
			<view class="">
				<view class="">总资产（万元）</view>
				<text class="text1">5163.66</text>
			</view>
			<view class="">
				<view class="">设备总台数（台）</view>
				<text class="text1">3213</text>
			</view>
			<view class="">
				<view class="">设备在线率</view>
				<text class="text1">99%</text>
			</view>
			<view class="">
				<view class="">故障台数</view>
				<text class="text1">8</text>
			</view>
		</view>
		<view class="bottom">
			<view class="sbsg">
				<view class="" @click="sblb">
					<uni-icons type="cloud-download-filled" size="50" color="rgb(93, 177, 254);"
						style=" text-shadow: rgba(0, 0, 0, 0.16) 2px 4px 5px;"></uni-icons>
					<br />
					<text>设备列表</text>
				</view>
				<view class="" @click="cpgl">
					<uni-icons type="chatboxes-filled" size="50" color="rgb(214, 124, 226);"
						style=" text-shadow: rgba(0, 0, 0, 0.16) 2px 4px 5px;"></uni-icons>
					<br />
					<text>产品管理</text>
				</view>
				<view class="" @click="sbxj">
					<uni-icons type="videocam-filled" size="50" color="rgb(170, 170, 255);"
						style=" text-shadow: rgba(0, 0, 0, 0.16) 2px 4px 5px;"></uni-icons>
					<br />
					<text>设备巡检</text>
				</view>
				<view class="" @click="sbcz">
					<uni-icons type="list" size="50" color="rgb(151, 143, 255);"
						style=" text-shadow: rgba(0, 0, 0, 0.16) 2px 4px 5px;"></uni-icons>
					<br />
					<text>设备分组</text>
				</view>
			</view>
			<view class="wxbj">
				<view class="">
					<text>设备维修</text>
					<uni-icons type="gear-filled" size="50" color="#31c9e8;"
						style=" text-shadow: rgba(0, 0, 0, 0.08) 2px 4px 5px;"></uni-icons>
				</view>
				<view class="">
					<text>设备维修</text>
					<uni-icons type="mic-filled" size="50" color="#ef7978;"
						style=" text-shadow: rgba(0, 0, 0, 0.08) 2px 4px 5px;"></uni-icons>
				</view>
			</view>
			<view class="xpzz">
				<view class="box1">
					<text>芯片制造第一车间</text>
					<view class="">切换车间</view>
				</view>
				<view class="box2">
					<view class="">
						<view class="">总资产（万元）</view>
						<text class="text1">36.5</text>
					</view>
					<view class="">
						<view class="">设备台数</view>
						<text class="text1">5</text>
					</view>
					<view class="">
						<view class="">今日健康率</view>
						<text class="text1">90%</text>
					</view>
				</view>
			</view>
			<view class="tb">
				<view class="work-t">
					<view class="work-t-l">
						设备运行时长
					</view>

					<view class="work-t-r last">
						<text>23年7月-24年3月</text>
						<uni-icons type="down" size="16"></uni-icons>
					</view>
				</view>
				<view class="" id="main"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		data() {
			return {}
		},
		mounted() {
			this.handleEcharts()
		},
		methods: {
			// echarts
			handleEcharts() {
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['7月', '8月', '9月', '10月', '11月', '12月', '3月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [23, 56, 89, 466, 765, 723, 321, 456, 789],
						type: 'line',
						areaStyle: {
							origin: "start",
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: "rgba(174,208,255, 0.8)",
								},
								{
									offset: 1,
									color: "rgba(47,245,255, 0)",
								},
							]),

						}
					}]
				};

				option && myChart.setOption(option);
			},
			// 跳转设备列表
			sblb() {
				uni.navigateTo({
					url: '/pages/shebeiliebiao/shebeiliebiao'
				})
			},
			// 跳转产品管理
			cpgl() {
				uni.navigateTo({
					url: '/pages/shebeiguanli/shebeiguanli'
				})
			},
			// 跳转设备巡检
			sbxj() {
				uni.navigateTo({
					url: '/pages/shebeixuncha/shebeixuncha'
				})
			},
			// 跳转设备操作
			sbcz() {
				uni.navigateTo({
					url: '/pages/shebeifenzu/shebeifenzu'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 90rpx;
		margin-bottom: 52rpx;
		background-color: #f8f8f8;
	}

	.top {
		background: linear-gradient(rgb(84, 121, 255), rgb(84, 121, 255));
		padding: 15rpx;
		display: flex;
		flex-wrap: wrap;

		view {
			width: 48%;
			color: #fff;

			view {
				width: 100%;
				padding-left: 20rpx;
				margin-top: 20px;
			}

			text {
				width: 100%;
				display: block;
				font-weight: 700;
				font-size: 32rpx;
				// font-size: 30px;
				padding-left: 20rpx;
				margin-top: 20rpx;
			}
		}
	}

	.sbsg {
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 52rpx 0rpx rgba(0, 0, 0, .07);
		display: flex;
		flex-wrap: wrap;

		view {
			width: 25%;
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;


			uni-icons {}

			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.wxbj {
		margin: 20rpx;
		display: flex;
		border-radius: 14rpx;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 52rpx 0rpx rgba(0, 0, 0, .07);
		background-color: #fff;
		justify-content: space-around;

		view:nth-child(1) {
			width: 48%;
			background-image: repeating-linear-gradient(45deg, #d6f4fa, #d5faf2);
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 20rpx;
			padding-bottom: 10rpx;
			border-radius: 14rpx;
			font-weight: 800;
		}

		view:nth-child(2) {
			width: 48%;
			background-image: repeating-linear-gradient(45deg, #fad8d6, #fad5e8);
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 14rpx;
			font-weight: 800;
		}
	}

	.xpzz {
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		border-radius: 14rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0rpx 0rpx 52rpx 0rpx rgba(0, 0, 0, .07);
		background-color: #fff;
		justify-content: space-around;

		.box1 {
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			text {
				font-weight: 700;
				text-align: justify;
				font-size: 32rpx;
			}

			view {
				font-size: 26rpx;
				color: #78909c;
			}

		}

		.box2 {
			width: 100%;
			display: flex;
			justify-content: space-around;
			margin-top: 40rpx;

			view {

				view {
					display: block;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #999;
				}

				text {
					display: block;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #999;
				}
			}

		}
	}

	.tb {
		margin: 20rpx;
		display: flex;
		flex-wrap: wrap;
		border-radius: 14rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0rpx 0rpx 52rpx 0rpx rgba(0, 0, 0, .07);
		background-color: #fff;
		justify-content: space-around;

		.work-t {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.work-t-l {
				font-size: 36rpx;
				font-weight: bold;
			}

			.work-t-r {
				background-color: #f8f7f8;
				font-size: 24rpx;
				padding: 10rpx;
				margin-right: 30rpx;
				border-radius: 10rpx;

				image {
					width: 16px;
					height: 16px;
				}
			}
		}

		#main {
			width: 100%;
			height: 400rpx;
		}
	}
</style>